<template>
  <div class="page-box">
      <TopNav title="BankPage.yxkxx" show_left="true"></TopNav>
    <div class="bink_card">
      <h3>{{ $t('BankPage.ndyxkxx') }}</h3>
      <ul class="bink_card_ul">
        <li style="position: relative"><h4>{{ $t('BankPage.yxmc') }}</h4>
          <input v-model="user_data.bank_name" type="text" disabled='true' :placeholder="this.$t('BankPage.wsryxmcqsz')">
          <span @click="handleClickSelectBank" class="fast-select">{{ $t('BankPage.ksxz') }}</span>
        </li>
        <li><h4>{{ $t('BankPage.khyx') }}</h4>
          <input v-model="user_data.bank_branch" type="text" :placeholder="this.$t('BankPage.wsrkhyxqsz')">
        </li>
        <li><h4>{{ $t('BankPage.yxkh') }}</h4>
          <input v-model="user_data.number" type="text" :placeholder="this.$t('BankPage.wsryxkhqsz')">
        </li>
        <li><h4>{{ $t('BankPage.skrmc') }}</h4>
          <input v-model="user_data.name" :disabled='editname' type="text" :placeholder="this.$t('BankPage.wsrskrmcqsz')">
        </li>
        <li><h4>{{ $t('BankPage.bzxx') }}</h4>
          <input v-model="user_data.remark" type="text" :placeholder="this.$t('BankPage.kbt')">
        </li>
        <li>
          <h5>{{ $t('BankPage.wts') }}: {{ $t('BankPage.nhwbzhytxtcxtzbzcncxysncsyyxjynbdcy') }}4{{ $t('BankPage.dyxhqsyxqrztxysxx') }},{{ $t('BankPage.xx') }}!</h5>
        </li>
        <li style="text-align: center;font-size:0.5rem;" v-if="user.bank">
          <div v-if="user.bank.status==0">
            <div><img src="/static/img/wait.png" alt=""></div>
            {{ $t('BankPage.shz') }}...
          </div>
          <div v-else-if="user.bank.status==1">
            <div><img src="/static/img/pass.png" alt=""></div>
            {{ $t('BankPage.shtg') }}
          </div>
          <div v-else>
            <div><img src="/static/img/fail.png" alt=""></div>
            <span style="color:#ff4c51;">{{user.bank.reply}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="loading" style="text-align: center;">
      <van-loading>{{ $t('BankPage.dqjl') }}...</van-loading>
    </div>
    <button :disabled="loading"  @click="handleClickC" class="btn">{{ $t('BankPage.szxx') }}</button>
    <nut-picker
      :is-visible="showSelectBank"
      :list-data="bankArr"
      @confirm="callbackConfirmBank"
      @close="callbackCloseBank"
    />
    <nut-shortpassword 
    :visible="isShow"
    @close="shortpwdClose"
    type="center"
    ></nut-shortpassword>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";

export default {
  name: 'BankPage',
    components: {MainNav,TopNav},
    data () {
    return {
        loading:false,
        user:{},
        isShow:false,
        editname:false,
        user_data:{
            name:'',
            number:'',
            bank_name:'',
            bank_branch:'',
            remark:'',
            pay_password:'',
        },
        bindType: '1',
        showSelectBank: false,
        bankArr:[
            [
              this.$t('BankPage.nyyx') ,
              this.$t('BankPage.gfyx') ,
              this.$t('BankPage.shncsyyx'),
              this.$t('BankPage.sfzyx'),
              this.$t('BankPage.bjyx'),
              this.$t('BankPage.zgyx'),
              this.$t('BankPage.zsyx'),
              this.$t('BankPage.xyyx'),
              this.$t('BankPage.gdyx'),
              this.$t('BankPage.yzcxyx'),
              this.$t('BankPage.jsyx'),
              this.$t('BankPage.jtyx'),
              this.$t('BankPage.payx'),
              this.$t('BankPage.zxyx'),
              this.$t('BankPage.hxyx'),
              this.$t('BankPage.msyx'),
              this.$t('BankPage.gsyx'),
              this.$t('BankPage.pfyx'),
            ]
        ]
    }
  },
    methods:{

        handleClickC(){
            let that = this
            this.$dialog({
              title: this.$t('BankPage.zy'),
              content: this.$t("BankPage.qqrndyxkxx")+this.$t("BankPage.shtghwfxgxmxx")+"<br/>"+this.$t("BankPage.xm")+":<span style='color: red;font-weight: 700;'>"+this.user_data.name+"</span>",
              closeBtn:true,  //显式右上角关闭按钮
              onOkBtn(event) {  //确定按钮点击事件
                
                this.close(); //关闭对话框
                that.showShortpwd();

              },
              
              
              
            });
        },
        showShortpwd(){
            this.isShow = true;   
        },
        shortpwdClose(val){
            
            this.isShow = false;
            if(val){ 
                this.user_data.pay_password = val;
                this.handleClickSave()
            }else{
              this.user_data.pay_password = ''
            }
            return
            
            
        },



        handleClickSave(){
            this.loading = true;
            let loading = this.$toast.loading();
            this.$axios.post(this.$api_url.save_bind_bank,
                this.$qs.stringify(this.user_data)
            ).then((res)=>{
                if(res.data.code == 0){
                    this.$toast.success(res.data.msg);
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                loading.hide();
                this.loading = false;
            })
        },
        callbackCloseBank(){
            this.showSelectBank = false;
        },
        callbackConfirmBank(e){
            this.user_data.bank_name = e[0];
        },
        getData(){
            this.loading = true;
            this.$axios.get(this.$api_url.user).then((res)=>{
                let data = res.data;
                this.user = data;
                if(this.user.bank){
                    this.user_data.bank_name = this.user.bank.bank_name;
                    this.user_data.name = this.user.bank.name;
                    this.user_data.number = this.user.bank.number;
                    this.user_data.remark = this.user.bank.remark;
                    this.user_data.bank_branch = this.user.bank.bank_branch;
                    if(this.user_data.name)  this.editname= true;
                }
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.loading = false;
            });
        },
        hasPasswrod(){
            this.loading =  true;
            this.$axios.get(this.$api_url.has_paypassword).then((res)=>{
                console.log(res);
                if(res.data.code == 0){
                    this.$dialog({
                    title: this.$t('BankPage.zy'),
                    content: this.$t('BankPage.qxszzfmmzcz'),
                    okBtnTxt:this.$t('BankPage.ljsz'),
                    closeOnClickModal:false,
                    onOkBtn(event) {  //确定按钮点击事件
                      
                      this.close(); //关闭对话框
                      location.href="/#/paypassword"

                    },
                    onCancelBtn(event){
                      location.href="/#/profile_detail"
                    },
                    
                    
                    
                  });
                    
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
               this.loading = false;
            });
        },
        handleClickSelectBank(){
            this.showSelectBank = true;
        },
    },
    mounted() {
      this.getData();
      this.hasPasswrod();
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page-box{
    padding-top:1.5rem;
    padding-bottom: 1rem;
    text-align: left;
  }
  .bink_card h3{
    padding: 0 .16rem;
    background-color: #eee;
    font-size: .36rem;
    line-height: 1rem;
    color: #333;
  }
  .bink_card_ul li{
    background-color: #fff;
    padding: 0 .56rem;
    overflow: hidden;
  }
  .bink_card_ul li h4{
    float: left;
    font-size: .373333rem;
    line-height: 1.173333rem;
    color: #999;
    width: 2.533333rem;
  }
  .bink_card_ul li input{
    float: left;
    width: 6rem;
    font-size: .373333rem;
    line-height: 1.173333rem;
    color: #666;
    outline-style: none;
    border: 0;
  }
  .btn{
    font-size: .426667rem;
    line-height: 1.12rem;
    border-radius: .106667rem;
    background-color: #2f3848;
    color: #fff;
    width: 90%;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: .666667rem;
  }
  .btn:disabled{
    background: #ccc;
  }
  .fast-select{
    position: absolute;
    right: 0.5rem;
    top: 0.4rem;
    color: #777;
    border-radius: 0.1rem;
    padding: 0.1rem;
    border: thin solid #aaa;
  }
</style>
